 <template>
  <div>
    <tTable :columns="columns" :data="tableData">
      <!-- 类型 -->
      <template v-slot:accountType="slotProps">
        <el-tag
          :type="slotProps.scope.row.accountType | accountFilter"
        >{{slotProps.scope.row.accountType === 'ORG' ? '企业' : '个人'}}</el-tag>
      </template>

      <!-- 支付方式 -->
      <template v-slot:outerPayMethod="slotProps">
        <el-tag
          :type="slotProps.scope.row.outerPayMethod | methodFilter"
        >{{slotProps.scope.row.outerPayMethod | methodNameFilter}}</el-tag>
      </template>

      <!-- 操作 -->
      <template v-slot:operate="slotProps">
        <el-button
          v-show="isRecall"
          class="add-style"
          @click="$emit('recall', slotProps.scope.row.id)"
          type="primary"
          size="small"
        >撤回</el-button>
      </template>
    </tTable>
  </div>
</template>

<script>
import tTable from "src/components/table/index.vue";

export default {
  filters: {
    methodFilter(status) {
      const statusMap = {
        ALI: "info", // 支付宝
        WECHAT: "success", // 微信
        BANK: "danger" // 银行账户
      };
      return statusMap[status];
    },
    methodNameFilter(status) {
      const statusMap = {
        ALI: "支付宝", // 支付宝
        WECHAT: "微信", // 微信
        BANK: "银行账户" // 银行账户
      };
      return statusMap[status];
    },
    accountFilter(status) {
      const statusMap = {
        ORG: "success", // 个人
        PERSON: "danger" // 企业
      };
      return statusMap[status];
    }
  },
  data() {
    return {
      checkIndex: 0,
      dialogVisible: false,

      columns: [
        {
          attr: { label: "", type: "index", width: "55" }
        },
        {
          attr: { prop: "amount", label: "金额" }
        },
        {
          slot: "accountType",
          attr: { prop: "accountType", label: "类型" }
        },
        {
          slot: "outerPayMethod",
          attr: { prop: "outerPayMethod", label: "支付方式" }
        },
        {
          attr: { prop: "outerAccount", label: "支付账户" }
        },
        {
          attr: { prop: "remark", label: "备注" }
        },
        {
          attr: { prop: "updateTime", label: "时间", width: "110" }
        },
        {
          slot: "operate",
          attr: { label: "操作", width: "180" }
        }
      ]
    };
  },
  props: ["tableData", "isRecall"],
  components: { tTable },
  methods: {
    checkDetail: function(index) {
      this.checkIndex = index;
      this.dialogVisible = true;
    }
  }
};
</script>

<style lang="scss" scoped>
@import "src/style/mixin";
.longTerm-style {
  color: #888;
  padding: 10px;
}

.input-width {
  width: 400px;
}

.upload-width {
  width: 400px;
}
.cascader-style {
  width: 300px;
  margin-bottom: 20px;
}

.widthBtn {
  width: 200px;
  margin: 20px 200px 0 0;
}
</style>
